<template>
    <div v-show="playlist.length > 0">
        <div class="normal-player" v-show="fullScreen">
            <div class="song-info">
                <p class="song-name van-ellipsis">{{currentSong.name}}</p>
                <p class="song-singer">{{currentSong.singer}}</p>
            </div>
            <div class="song-bg">
                <img :src="currentSong.cover" height="100%" width="100%" alt="">
            </div>
            <div class="mask"></div>
            <div class="middle-cd" ref="middleCd" @click="changeView">
                <div class="cd-image">
                    <img class="cd" :src="currentSong.cover" :class="cdRotate"  width="100%" height="100%" alt="">
                </div>
                <p class="lyric">{{currentTxt}}</p>
            </div>
            <div class="middle-lyric" ref="middleLyric" @click="changeView">
                <scroll :data="lyric && lyric.lines" ref="scroll">
                    <ul>
                        <li class="item-txt" ref="lyricLine" :class="{'current':currentLine === index}" v-for="(item,index) in lyricLines" :key="index">
                            {{item.txt}}
                        </li>
                    </ul>
                </scroll>
            </div>
            <div class="bottom">
                <div class="slide-wrapper">
                    <div class="current-time times">{{formatTime(currentTime)}}</div>
                    <van-slider
                        v-model="percent"
                        bar-height="4px"
                        button-size="12"
                        active-color="#ee0a24"
                        @change="changePercent"
                        @input="changeing"
                    />
                    <div class="total-time times">{{formatTime(duration)}}</div>
                </div>
                <div class="tool-wrapper">
                    <div class="iconfont" :class="modeIcon" @click="changeMode"></div>
                    <div class="iconfont icon-shangyiqu" @click="prev"></div>
                    <div class="iconfont" :class="playingIcon" @click="togglePlay"></div>
                    <div class="iconfont icon-xiayiqu" @click="next"></div>
                    <div class="iconfont icon-like-outline icon-like-favorite"></div>
                </div>
            </div>
            <div class="close iconfont icon-xiangxia" @click="toggle"></div>
        </div>
        <div class="mini-player" v-show="!fullScreen">
            <div class="mini-cd" @click="toggle">
                <img class="cd" :class="cdRotate" :src="currentSong.cover"  width="100%" height="100%" alt="">
                <div>
                    <p class="song-name">{{currentSong.name}}</p>
                    <p class="song-singer">{{currentSong.singer}}</p>
                </div>
            </div>
            <div class="mini-progress">
                <div class="mini-stop">
                    <van-circle v-model="percent" :rate="100" size="40px" color="#d43c33" layer-color="#eee"/>
                    <div class="iconfont" :class="playingIcon" @click="togglePlay"></div>
                </div>
                <div class="iconfont icon-liebiao list" @click="handlePlaying"></div>
            </div>
        </div>
        <div class="playing-mask" v-show="!fullScreen && showPlaying"></div>
        <transition name="van-slide-up">
            <div class="playing" v-show="!fullScreen && showPlaying">
                <div class="delete-all van-hairline--bottom" @click="clearAll">
                    <span>全部删除</span>
                    <span class="iconfont icon-lajitong"></span>
                </div>
                <div class="playing-songs">
                    <scroll :data="playingList" ref="playingScroll">
                        <ul class="song-list">
                            <li class="item-song" v-for="(item,index) in playingList" :key="index">
                                <div class="song-name van-ellipsis">{{item.name}}</div>
                                <div class="icon-wrapper iconfont icon-lajitong" @click="deletePlaying(index)"></div>
                            </li>
                        </ul>
                    </scroll>   
                </div>
                <div class="close-btn" @click="showPlaying = false">关 闭</div>
                <!-- <playing :playingList="playingList"></playing> -->
            </div>
        </transition>
        <audio :src="songSrc" @playing="startPlay" @ended="end" @timeupdate="timeUpdate" ref="audio"></audio>
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { Circle, Slider, Overlay } from 'vant'
import { playMode } from 'common/js/config'
import { shuffle } from 'common/js/util'
import Lyric from 'lyric-parser'
import scroll from 'components/scroll/scroll'
import { saveLoaded, getLoadedList, delLoadedList} from 'common/js/cache'
import Playing from 'components/playing/playing'
export default {
    name:'',
    data(){
        return {
            isPlaying: true,
            currentTime: 0,
            duration: 0,
            percent: 0,
            inputPercent: false,
            currentTxt: '',
            currentLine: 0,
            lyric: {},
            isCdMode: true,
            lyricLines: [],
            playingList: [],
            showPlaying: false,
            isLike: false
        }
    },
    mounted() {
        
    },
    methods: {
        deletePlaying(index) {
            delLoadedList(index)
            this.playingList = getLoadedList()
            if(!this.playingList.length) {
                this.clearAll()
            }
        },
        clearAll() {
            this.showPlaying = false
            this.setPlaylist([])
            this.pause()
        },
        handlePlaying() {
            this.showPlaying = true
            setTimeout(()=> {
                this.$refs.playingScroll.refresh()
            })    
        },
        toggle() {
            this.togglePlayer(!this.fullScreen)
        },
        prev() {
            if(!this.playlist.length) {
                return
            }
            let index = this.currentIndex - 1
            if(index === -1){
                index = this.playlist.length - 1
            }
            this.setCurrentIndex(index)
            this.getSongSource()
            this.play()
        },
        next() {
            if(!this.playlist.length) {
                return
            }
            let index = this.currentIndex + 1
            if(index === this.playlist.length){
                index = 0
            }
            this.setCurrentIndex(index)
            this.getSongSource()
            this.play()
        },
        play() {
            this.isPlaying = true
            this.$refs.audio.play()
        },
        pause() {
            this.$refs.audio.pause()
            this.isPlaying = false
        },
        timeUpdate(e) {
            this.currentTime = e.target.currentTime
            if(this.duration && !this.inputPercent) {
                this.percent = (this.currentTime / this.duration) * 100
            }   
        },
        changePercent(val) {
            if(this.duration){
                this.currentTime = (val / 100) * this.duration
                this.$refs.audio.currentTime = this.currentTime
            }
            this.lyric.seek(this.currentTime * 1000)
            this.inputPercent = false
        },
        changeing(val) {
            this.inputPercent = true
            this.percent = val
            let time = val * this.duration
            this.lyric.seek(time * 1000)
        },
        end() {
            if(this.mode === playMode.loop) {
                this.loop()
                this.lyric.seek(0)
                return
            }
            this.next()
        },
        formatTime(interval) {
            interval = interval | 0
            const minute = interval / 60 | 0
            const second = this._pad(interval % 60)
            return `${minute}:${second}`
        },
        _pad(num, n = 2) {
            let len = num.toString().length
            while (len < n) {
                num = '0' + num
                len++
            }
            return num
        },
        togglePlay() {
            if(this.isPlaying) {
                this.pause()
            }else{
                this.play()
            }
            this.lyric && this.lyric.togglePlay()
        },
        changeMode() {
            let mode = (this.mode + 1) % 3
            this.setPlaymode(mode)
            let list = []
            if(mode === playMode.random) {
                list = shuffle(this.sequenceList)
            }else{
                list = this.sequenceList
            }
            let index = this.resetIndex(list)
            this.setPlaylist(list)
        },
        resetIndex(list) {
            let index = 0
            index = list.findIndex(item=> {
                return item.id === this.currentSong.id
            })
            this.setCurrentIndex(index)
        },
        loop() {
            this.$refs.audio.currentTime = 0
            this.$refs.audio.play()
        },
        handlerLyric({lineNum, txt}) {
            if(lineNum > 7) {
                let el = this.$refs.lyricLine[lineNum - 7]
                this.$refs.scroll.scrollToElement(el,1000)
            }else{
                this.$refs.scroll.scrollTo(0,0,1000)
            }
            this.currentLine = lineNum
            this.currentTxt = txt
        },
        changeView() {
            this.isCdMode = !this.isCdMode
            if(this.isCdMode) {
                this.$refs.middleLyric.style.opacity = 0
                this.$refs.middleCd.style.opacity = 1
            }else{
                this.$refs.middleLyric.style.opacity = 1
                this.$refs.middleCd.style.opacity = 0
            }
        },
        getSongDuration() {
            let stop = setInterval(() => {
                this.duration = this.$refs.audio.duration
                if (this.duration) {
                    clearInterval(stop)
                }
            }, 150)
        },
        startPlay() {
            this.isPlaying = true
            saveLoaded(this.currentSong)
            this.playingList = getLoadedList()
        },
        ...mapMutations({
            togglePlayer: 'TOGGLE_PLAYER',
            setCurrentIndex: 'SET_CURRENT_INDEX',
            setPlaymode: 'SET_PLAY_MODE',
            setPlaylist: 'SET_PLAY_LIST',
        }),
        ...mapActions({
            getSongSource:'getSongSource',
        })
    },
    computed: {
        playingIcon() {
            return this.isPlaying ? 'icon-zanting' : 'icon-bofang1'
        },
        cdRotate() {
            return this.isPlaying ? '' : 'paused'
        },
        modeIcon() {
            return this.mode === 0 ? 'icon-ziyuanldpi' : this.mode === 1 ? 'icon-danquxunhuan' : 'icon-repeat'
        },
        ...mapGetters(['currentIndex', 'sequenceList', 'playlist','fullScreen','currentSong','songSrc', 'mode', 'songLyric'])
    },
    watch: {
        songSrc() {
            this.$refs.audio.src = this.songSrc
            this.percent = 0
            this.getSongDuration()
            setTimeout(()=> {
                this.currentTime = 0
                this.$refs.audio.play()
                if(this.songLyric) {
                    this.lyric = new Lyric(this.songLyric, this.handlerLyric)     
                    this.lyricLines =  this.lyric.lines   
                    this.lyric.play()
                }
            },20)
        },
        songLyric(newVal) {   
            if(this.lyric && this.lyric.lines) {
                this.lyric.stop()
                this.lyric = {}
                this.currentLine = 0
                this.currentTxt = ''
            }
            this.lyricLines = []    
        },

    },
    components: {
        scroll,
        Playing,
        [Circle.name]: Circle,
        [Slider.name]: Slider,
        [Overlay.name]: Overlay
    }
}
</script>

<style scoped lang="less">
    .normal-player{
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        .song-info{
            z-index: 100;
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translate3d(-50%,0,0);
            text-align: center;
            font-size: 16px;
            color: #fff;
            .song-name{
                width: 200px;
            }
            .song-singer{
                margin-top: 5px;
                font-size: 12px;
            }
        }
        .song-bg{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: scale(1.1);
            filter: blur(20px);
        }
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .3);
        }
        .middle-cd{
            position: absolute;
            left: 50%;
            top: 130px;
            bottom: 130px;
            transform: translate3d(-50%,0,0);
            .cd-image{
                overflow: hidden;
                height: 260px;
                width: 260px;
                padding: 10px;
                background: #333;
                border-radius:50%;  
                .cd{
                    transform-origin: center;  
                    border-radius:50%; 
                    animation: rotate-cd 30s linear infinite; 
                }
                .paused{
                    animation-play-state: paused
                }
            }
            .lyric{
                margin-top: 15px;
                text-align: center;
                color: #fff;
            }
        }
        .middle-lyric{
            z-index: 99;
            overflow: hidden;
            position: absolute;
            top: 90px;
            bottom: 150px;
            left: 50px;
            right: 50px;
            opacity: 0;
            .item-txt{
                text-align: center;
                line-height: 28px;
                color: #ddd;
                &.current{
                    color: #fff;
                }
            }
        }
        .close{
            z-index:199;
            position: absolute;
            left: 20px;
            top: 20px;
            height: 30px;
            width: 30px;
            color: #fff;
            font-size:26px;
        }
        .bottom{
            position: absolute;
            left: 50%;
            bottom: 50px;
            width: 80%;
            transform: translate3d(-50%,0,0);
            color: #fff;
            .slide-wrapper{
                display: flex;
                align-items: center;
                margin-bottom: 25px;
                .times{
                    width: 80px;
                    text-align: center;
                }
            }
            .tool-wrapper{
                display: flex;
                justify-content: space-around;       
                .iconfont{
                    font-size: 22px;
                    
                }
                .icon-like-favorite{
                    color: #d43c33;
                }
            }
        }

    }
    .mini-player{
        z-index: 99;
        position: fixed;
        left: 0;
        bottom: 0;
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        background: #fff;
        box-shadow: 0 -5px 5px rgba(238, 238, 238, .3);
        .mini-cd{
            display: flex;
            align-items: center;
            width: 200px;
            height: 50px;
            .cd{
                margin: 0 10px 0 20px;
                width: 50px;
                border-radius:50%;
                animation: rotate-cd 30s linear infinite;
                border: 1px solid #f7f7f7;
                &.paused{
                    animation-play-state: paused
                }
            }
            .song-name{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100px;
            }
            .song-singer{
                color: #888;
                font-size: 12px;
            }
        }
        .mini-progress{
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 15px;
            box-sizing: border-box;
            .mini-stop{
                height: 40px;
                position: relative;
                .iconfont{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate3d(-46%,-48%,0);
                    color: #999;
                }
            }
            .list{
                margin-left: 10px;
                font-size:24px;
                color: #999;
            }
        }
    }
    .playing-mask{
        z-index: 99;   
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
    }
    .playing{
        z-index: 99;   
        position: fixed;
        left: 0;
        bottom: 0;
        height: 300px;
        width: 100%;    
        padding: 0 20px;
        box-sizing: border-box;
        background: #fff; 
        .delete-all{
            padding: 10px 0;
            display: flex;
            justify-content: center;
            align-items: center;
        } 
        .playing-songs {
            z-index: 119;  
            overflow: hidden;
            position: absolute;
            top: 40px;
            bottom: 42px;
            width: 100%; 
            .song-list{
                box-sizing: border-box  ;
                padding: 8px 0;
                .item-song{
                    padding: 8px 0;
                    display: flex;
                    .song-name{
                        flex: 1;
                        width: 0;
                    }
                    .icon-wrapper{
                        width: 70px;
                        margin-left: 15px;
                    }
                }  
            }
 
        }
        .close-btn{
            position: absolute;
            left: 0;
            bottom: 0;
            height: 42px;
            width: 100%;
            line-height: 42px;
            text-align: center;
            background: #d43c33;
            color: #fff;
        }
    }
    @keyframes rotate-cd {
        0% {
            transform: rotateZ(0deg);
        }
        100% {
            transform: rotateZ(360deg);
        }
    }
</style>
